<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/ssm2202/webjars/layui/2.7.6/css/layui.css">
    <script src="/ssm2202/webjars/layui/2.7.6/layui.js"></script>
</head>
<style>
    h1 {
        text-align: center;
    }

    .loginFormDiv {
        width: 35%;
        margin: 10% auto;
        border: 1px solid black;
        padding: 20px;
        box-shadow: 10px 10px 10px 10px #888888;
    }
</style>
<body>
<div class="loginFormDiv">
    <h1>登录</h1>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">账号:"root" 密码:"123"</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
                <input type="text" name="captcha" autocomplete="off" placeholder="请输入验证码" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <img src="/ssm2202/hutoolCap" style="width:85px;height: 38px" id="cap"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">两周内免登录</label>
            <div class="layui-input-block">
                <input type="checkbox" name="autoLogin" lay-skin="switch" lay-text="开启|关闭">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="loginBtn">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    var $ = layui.$;
    //Demo
    layui.use(
        'form',
        function () {
            var form = layui.form;
            //监听表单提交
            form.on('submit(loginBtn)', function (data) {
                // layer.alert(JSON.stringify(data.field), {
                //     title: '最终的提交信息'
                // });
                // 发ajax请求
                $.ajax({
                    url: "/ssm2202/user/login",
                    data: data.field,   // 对应的post请求体中的数据格式为 username=luffy&password=123456&capchar=LH
                    // 如果请求体中要放json，使用如下两行代码
                    // contentType:"application/json",
                    // data:JSON.stringify(data.field),
                    type: "post",
                    success: function (result) {
                        console.log(result);
                        // 登录成功进行页面跳转
                        if (result.code == "1") {
                            window.location = "plateform.html";
                        } else {
                            // 登录失败给出提示信息
                            layer.alert(result.message, {
                                title: '提示信息'
                            });
                            newCaptcha($("#cap"));
                        }
                    },
                    error: function (result) {
                        console.log(result);
                        // 登录失败给出提示信息
                        layer.alert(result.message, {
                            title: '提示信息'
                        });
                    }
                });
                // 注意，这里要return  false ，取消表单提交的默认行为 （往action对应的url发送请求 ）
                return false;
            });
        }
    );

    function newCaptcha(ele) {
        path = "/ssm2202/hutoolCap?" + new Date().getTime();
        $(ele).attr("src", path);
    }

    $("#cap").click(function () {
        newCaptcha(this)
    });
</script>
</html>